<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>MeteoCal - Event Creation</title>
        <link href="../css/application.css" rel="stylesheet"></link>
        <link href="../css/datetimeevent.css" rel="stylesheet"></link>
        <link rel="icon" type="image/ico" href="../images/logoico.ico"/>
    </h:head>
    <h:body style="min-height: 800px;"><div id="body">

            <div id="head">
                <a href="personalpage.xhtml"><img src="../images/logo.png" /></a>

                <h:form><p:commandLink action="#{loginBean.logout()}">
                        <p:graphicImage value="../images/logout.png" style="width: 70px; top:140px; left:88%;"/>
                    </p:commandLink></h:form>
            </div>

            <div id="title">
                <p1>MeteoCal</p1><br />
                <p2>Your website to plan your events.</p2>
            </div>

            <div id="bar">
                <a href="personalpage.xhtml" id="ppage" >#{uBean.actualLoggedUser.username} 's MeteoCal</a>
                <a href="calendar.xhtml" id="calendar">Calendar</a>
                <a href="search.xhtml" id="search">Search MeteoCal's friends</a>
            </div>

            <div id="e_creation">
                <center>
                    <h:form id="event_form" >
                        <p:growl id="msgs" showDetail="true" />

                        <h:panelGrid columns="1"  id="matchGrid">

                            <h:outputLabel for="title" value="Title">
                                <p:inputText id="title" value="#{eBean.newEvent.title}" style="width:450px; float:right;" >
                                    <p:ajax update="titlemsg"/>
                                </p:inputText>
                                <p:message id="titlemsg" for="title" />
                            </h:outputLabel>

                            <br />
                            <h:outputLabel for="description" value="Description">
                                <p:inputTextarea id="description" value="#{eBean.newEvent.description}" style="min-width:450px; max-width: 450px;
                                                 min-height: 200px; max-height: 200px; float:right; margin-left: 100px;" autoResize="false">
                                    <p:ajax update="dscrpmsg"/>
                                </p:inputTextarea>
                                <p:message id="dscrpmsg" for="description" />
                            </h:outputLabel>

                            <br />

                            <h:messages  style="font-weight: bold; color:red; padding:0px; margin:0;"/>
                            
                            <h:panelGrid columns="5">
                                <h:outputLabel for="date" value="Date" id="edate">
                                    <p:calendar value="#{eBean.newEvent.date}"  style="float:right;" pattern="dd/MM/yyyy"
                                                mindate="#{eBean.today}" id="date">
                                        <p:ajax update="datamsg"/>
                                    </p:calendar>
                                    <p:message id="datamsg" for="edate" />
                                </h:outputLabel>

                                <h:outputLabel style="width:30px"/>

                                <h:outputLabel for="beginningHour" value="from" id="bh">
                                    <p:calendar value="#{eBean.newEvent.beginningHour}" id="beginningHour"
                                                pattern="HH:mm" timeOnly="true" style="float:right;">
                                        <p:ajax update="bhmsg"/>
                                    </p:calendar>
                                    <p:message id="bhmsg" for="bh" />
                                </h:outputLabel>	

                                <h:outputLabel style="width:30px"/>

                                <h:outputLabel for="endingHour" value="to" id="eh">
                                    <p:calendar value="#{eBean.newEvent.endingHour}" id="endingHour"
                                               pattern="HH:mm" timeOnly="true" style="float:right;">
                                        <p:ajax update="ehmsg"/>
                                    </p:calendar>
                                    <p:message id="ehmsg" for="eh" />
                                </h:outputLabel>
                            </h:panelGrid>

                            <br />
                            <h:outputLabel for="city" value="City (city name, state ID)">
                                <p:inputText id="city" value="#{eBean.newEvent.city}" style="width:350px;  margin-left: 80px; float:right;">
                                    <p:ajax update="citymsg"/>
                                </p:inputText>
                                <p:message id="citymsg" for="city" />
                            </h:outputLabel>

                            <br />          
                            <h:panelGrid columns="8">
                                <h:outputLabel for="outdoor" styleClass="form" value="Event place">
                                    <h:selectOneRadio value="#{eBean.newEvent.outdoor}" style="float:right;" id="outdoor">
                                        <f:selectItem itemValue="#{true}" itemLabel="Outdoor"  />
                                        <f:selectItem itemValue="#{false}" itemLabel="Indoor" />
                                    </h:selectOneRadio>
                                </h:outputLabel>
                                <h:outputLabel/>
                                <h:outputLabel/>
                                <h:outputLabel/>
                                <h:outputLabel/>
                                <h:outputLabel for="private1" styleClass="form" value="Event privacy">
                                    <h:selectOneRadio value="#{eBean.newEvent.private1}" style="float:right;" id="private1">
                                        <f:selectItem itemValue="#{false}" itemLabel="Public"  />
                                        <f:selectItem itemValue="#{true}" itemLabel="Private" />
                                    </h:selectOneRadio>
                                </h:outputLabel>
                            </h:panelGrid>


                        </h:panelGrid>

                        <p:dialog modal="true"  header="Values" widgetVar="dlg" showEffect="fold" >
                            <p:panelGrid id="display" columns="2" columnClasses="label,value" >
                                <h:outputText value="Date"/>
                                <h:outputText value="#{eBean.newEvent.date}">
                                    <f:convertDateTime pattern="MM/dd/yyyy" />
                                </h:outputText>

                                <h:outputText value="from" />
                                <h:outputText value="#{eBean.newEvent.beginningHour}">
                                    <f:convertDateTime pattern="HH:mm a" />
                                </h:outputText>

                                <h:outputText value="to" />
                                <h:outputText value="#{eBean.newEvent.endingHour}">
                                    <f:convertDateTime pattern="HH:mm a" />
                                </h:outputText>

                            </p:panelGrid>
                        </p:dialog>

                        <br />
                        <p:commandButton value="Confirm" action="#{eBean.create(uBean.actualLoggedUser.username)}"  
                                         style="border:0; box-shadow:0px 2px 5px #000000;" update="matchGrid"/>
                        <f:param name="id" value="#{eBean.newEvent.id}" />
                    </h:form></center>
            </div>

        </div>      
    </h:body>
</html>

